<template>
  <div class="login_container">
    <div class="login_box">
       <!-- 头像区域 -->
        <div class="avatar_box">
          <img src="../assets/logo.png" alt="">
        </div>
        <!-- 登录表单区域 -->
         <el-form label-width="0px" class="login_form" :model="loginForm" :rules="loginFormRules" ref="loginFormRef">
             <!-- 用户名 -->
           <el-form-item prop="username">
             <el-input  prefix-icon="el-icon-user" v-model="loginForm.username"></el-input> <!--v-model适用于表单对象 -->
           </el-form-item>
             <!-- 密码 -->
            <el-form-item prop="password">
             <el-input  prefix-icon="el-icon-suitcase" v-model="loginForm.password" show-password></el-input>
           </el-form-item>
           <el-form-item class="btns">
             <el-button type="primary" @click="login">登录</el-button>
             <el-button type="info" @click="resetLoginForm">重置</el-button>
           </el-form-item>
         </el-form>      
    </div>
  </div>
</template>

<script>
export default {
  data ()
   {
     return {
       //登录表单绑定数据（双向绑定）
       loginForm: {
         username: 'admin',
         password: '123456'
       },
       //验证规则对象
       loginFormRules: {
         //验证用户名与密码的格式
          username: [
            { required: true, message: '请输入用户名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
           password: [
            { required: true, message: '请输入登录密码', trigger: 'blur' },
            { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
          ]
        },
     }
   },
   methods:{
     //重置表单按钮函数
     resetLoginForm(){
       this.$refs.loginFormRef.resetFields()
     },
     //登录前表单数据验证
     login(){
       this.$refs.loginFormRef.validate(async valid=>{
         console.log(valid);
         //如果表单数据格式不正确则不响应 下面的this.$message this.$http都是在全局挂载好的组件与方法
        if (!valid) this.$message.warning('请输入格式正确的用户名或密码！')
        //数据格式正确 发起post请求 参数是表单里的数据（即data里和页面表单绑定的数据）对于promise回调地狱巴拉巴拉 参数会包裹一层东西 我们用解构赋值获得我们想要的data对象
        const { data: res } = await this.$http.post('login', this.loginForm)//post（地址.参数）
        if (res.meta.status !== 200) return this.$message.error('登录失败！')//状态码的数据判断返回什么的 交给后端代码 后端数据验证的时候 数据库里的数据名字要与表单中的数据名字保持一致 比如username password
        this.$message.success('登录成功')
        // 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中
        //   1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
        //   1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
        window.sessionStorage.setItem('token', res.data.token)
        //console.log(res.data.token);
        // 2. 通过编程式导航跳转到后台主页，路由地址是 /home
        this.$router.push('/home')

       })
     }
     

   }
}
</script>

<style lang="less" scoped>
.login_container{
  background-color: #3c7ab8;
  background-image: linear-gradient(to bottom right,rgb(114, 135, 254),rgb(130, 88, 186),rgb(59, 45, 159));//渐变色
  height: 100%;
}
.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 8px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  // 嵌套写法
  .avatar_box {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    border: 8px solid rgb(234, 234, 240);
    box-shadow: 0 0 10px rgb(206, 202, 202);
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #fff;
    }
  }
}
.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.btns {
  display: flex;
  justify-content: flex-end;
}
</style>